<!-- 弹窗组件配置 -->
<template>
	<div>
		<el-form-item label="背景图片">
			<img v-if="main.activeOption.backgroundImage" :src="main.activeOption.backgroundImage" alt="" width="100%" />
			<el-input clearable v-model="main.activeOption.backgroundImage">
				<div @click="main.handleOpenImg('activeOption.backgroundImage', 'background')" slot="append">
					<i class="iconfont icon-img"></i>
				</div>
			</el-input>
		</el-form-item>
		<el-collapse accordion>
			<el-collapse-item title="标题文字设置">
				<el-form-item label="内容">
					<avue-input v-model="main.activeOption.headerTitle" :disabled="disabled"></avue-input>
				</el-form-item>
				<el-form-item label="大小">
					<avue-input-number v-model="main.activeOption.headerFontSize" :min="0" :disabled="disabled"></avue-input-number>
				</el-form-item>
				<el-form-item label="文字粗细">
					<avue-select v-model="main.activeOption.headerFontWeight" :dic="dicOption.fontWeight" :disabled="disabled"> </avue-select>
				</el-form-item>
				<el-form-item label="颜色">
					<avue-input-color v-model="main.activeOption.headerColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="背景色">
					<avue-input-color v-model="main.activeOption.headerBgColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
			</el-collapse-item>
			<el-collapse-item title="关闭按钮设置">
				<el-form-item label="显示">
					<avue-switch :disabled="disabled" v-model="main.activeOption.showCloseBtn"> </avue-switch>
				</el-form-item>
				<el-form-item label="大小">
					<avue-input-number v-model="main.activeOption.closeBtnFontSize" :min="0" :disabled="disabled"></avue-input-number>
				</el-form-item>
				<el-form-item label="关闭按钮颜色">
					<avue-input-color v-model="main.activeOption.closeBtnColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
			</el-collapse-item>
			<el-collapse-item title="内容设置">
				<el-form-item label="背景色">
					<avue-input-color v-model="main.activeOption.bodyBgColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="可视化">
					<avue-select :dic="canvasList" filterable :disabled="disabled" v-model="main.activeOption.dialogCanvasId" @change="changeCanvasList"> </avue-select>
				</el-form-item>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import { getList, getObj } from '@/api/visual';
import { config as defaultConfig } from '@/option/config';
import { dicOption } from '@/option/config';
export default {
	name: 'dialog',
	inject: ['main', 'contain'],
	data() {
		return {
			dicOption: dicOption,
			canvasList: [],
			disabled: this.contain.activeObj.isLock
		};
	},
	mounted() {
		this.getCanvasList();
	},
	methods: {
		// 获取可视化列表
		getCanvasList() {
			getList({
				current: 1,
				size: 1000
			}).then(res => {
				const data = res.data.data;
				this.canvasList = data.records.map(rec => {
					return {
						value: rec.id,
						label: rec.title
					};
				});
				console.log('this.canvasList  ', this.canvasList);
			});
		},
		// 获取可视化详情
		changeCanvasList(value) {
			console.log('value', value);
			// getObj(value.value)
			//     .then((res) => {
			//         const data = res.data.data;
			//         this.contain.obj = data;
			//         let config = data.config;
			//         const contain = {
			//             config: JSON.parse(config.detail) || {},
			//             component: JSON.parse(config.component) || []
			//         };
			//         this.contain.config = Object.assign(
			//             {},
			//             defaultConfig,
			//             contain.config
			//         );
			//         this.$set(this.contain, "nav", contain.component);
			//         this.$set(this.contain, "visual", data.visual);
			//         console.log("this.contain", this.contain);
			//     })
			//     .catch((err) => {});
		}
	}
};
</script>

<style></style>
